<template>
	<view ref="QS_Navbar" class="QS_Navbar" :class="getClass">
		<!-- #ifndef MP-ALIPAY -->
		<view ref="background" :animation="navbarAnimation" :class="{ 'QS_Navbar--fixed': getFixed }"
			:style="{ 'z-index': zIndex }">
			<view class="QS_Navbar-statusBar" :style="{ 'height': statusBarHeight, background: statusBarBackground }"
				v-if="getStatusBar"></view>

			<view class="QS_Navbar-header"
				:style="{ 'padding-right': ((diffMenuButtonInfo?menuButtonInfoLeft:0) + 12.5) + 'px' }">
				<slot>
					<block :style="{ 'flex': item.flex || '' }" v-for="(item, index) in nNavbarItems || []"
						:key="index">
						<view class="QS_Navbar-item" :style="{ 
							'width': (item.width || item.stringWidth)?(item.stringWidth || (Number(item.width)*wW + 'rpx')):'', 
							'flex': item.flex || '',
							'background-color': item.backgroundColor, 
							'border-style': item.borderStyle,
							'border-width': item.borderWidth,
							'border-color': item.borderColor,
							'border': item.border,
							'border-radius': (item.borderBottomLeftRadius||item.borderBottomRightRadius||item.borderTopLeftRadius||item.borderTopRightRadius)?'':(item.borderRadius || ''),
							'border-bottom-left-radius': item.borderBottomLeftRadius || '',
							'border-bottom-right-radius': item.borderBottomRightRadius || '',
							'border-top-left-radius': item.borderTopLeftRadius || '',
							'border-top-right-radius': item.borderTopRightRadius || '',
							'padding': item.padding,
							'marginLeft': item.marginLeft || 0,
							'marginRight': item.marginRight || 0,
							'opacity': item.opacity === 0?0:(item.opacity || 1),
							
							'justify-content': item.layout==='left'?'flex-start':item.layout==='right'?'flex-end':'center'
						}" :data-index="index" @tap.stop="_click($event)">
							<block v-if="item&&item.type === 'search'">
								<view class="QS_Navbar-item--search"
									:style="{ height: item.height || '', padding: item.padding || '' }">
									<dyc-icons v-if="item.hasIcon !== false" type="search-2"
										:fontSize="item.iconSize || iconSize" :color="item.iconColor || '#000000'">
									</dyc-icons><text class="QS_Navbar-text text_overflow_ellipsis"
										:style="{ 'margin-left': item.hasIcon !== false?'9px':'0', 'color': item.color || '#000000', 'font-size': item.fontSize || '', 'font-weight': item.fontWeight }">{{item.text}}</text>
								</view>
							</block>
							<!-- <block v-else-if="item&&(item.type === 'icon' || item.type === 'dyc-icon') && item.icon == 'back'">
								<view v-if="!isTabbarPage" class="" @tap.stop="voidFn" :style="{ zIndex: zIndex + 1 }" style="position: absolute;top: 0;left: 0;transform: translate(-5.5px,-50%); ;height: 32px;width: 87px;display: flex;flex-direction: row;align-items: center;justify-content: center;background: rgba(255,255,255,0.6);border: 1px solid rgba(0,0,0,0.08);border-radius: 33px;">
									<view @tap.stop="_click($event, 'back')" class="" style="padding-right: 8px;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
										<dyc-icons type="back" fontSize="18px"
											color="#000000"></dyc-icons>
									</view>
									<view class="" style="height: 18px;width: 1px; background-color: rgba(0,0,0,.2);"></view>
									<view @tap.stop="_click($event, 'home')" class="" style="padding-left: 14px;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
										<dyc-icons type="home" fontSize="18px"
											color="#000000"></dyc-icons>
									</view>
								</view>
							</block> -->
							<block v-else-if="item&&item.type === 'icon'">
								<QSIcons fontWeight="bold" animationType="elasticity_Y" hasAnimation
									startAnimationType="tap" :type="item.icon" :fontSize="item.iconSize || iconSize"
									:color="item.iconColor || '#000000'"></QSIcons>
							</block>
							<block v-else-if="item&&item.type === 'dyc-icon'">
								<dyc-icons :type="item.icon" :fontSize="item.iconSize || iconSize"
									:color="item.iconColor || '#000000'"></dyc-icons>
							</block>
							<block v-else-if="item&&item.type === 'image'">
								<image :src="item.src" :mode="item.mode||'aspectFill'" :style="{
									'border-radius': item.itemBorderRadius || '8rpx',
									'background-color': item.itemBackgroundColor || 'rgba(255,255,255,0)',
									'width': item.itemWidth || '100%',
									'height': item.itemHeight || '100%'
								}"></image>
							</block>
							<block v-else-if="item&&item.type==='text'"><text class="text_overflow_ellipsis" :style="{
									'border-radius': item.itemBorderRadius || '8rpx',
									'background-color': item.itemBackgroundColor || 'rgba(255,255,255,0)',
									'width': item.itemWidth || '100%',
									'height': item.itemHeight || '100%',
									'font-size': item.fontSize || '18px',
									'color': item.color || '#333333',
									'text-align' : item.textAlign || 'center',
									'font-weight': item.weight || 'bold'
								}">{{item.text}}</text>
							</block>
							<block v-else-if="item&&item.type==='colImageText'">
								<view class="colImageText" :style="{
									'width': item.itemWidth || '100%',
									'height': item.itemHeight || '100%',
									'border-radius': item.itemBorderRadius || '8rpx',
									'background-color': item.itemBackgroundColor || 'rgba(255,255,255,0)',
									'font-size': item.fontSize || '12px', 
									'color': item.color || '#000', 
									'font-weight': item.weight || '0'
								}">
									<image :src="item.src" :mode="item.mode||'aspectFill'" class="colImageText-image"
										:style="{
										'border-radius': item.imageBorderRadius || '4px',
									}"></image><text class="colImageText-text">{{item.text}}</text>
								</view>
							</block>
							<block v-else-if="item&&item.type==='tabs'">
								<QS-Tabs :tabs="item.tabs" :tabIndex="tabIndex"
									:width="(item.stringWidth || (Number(item.width)*wW + 'rpx'))" height="34px"
									:space="item.space" :autoScrollType="item.autoScrollType"
									:activeFontSize="item.activeFontSize" :defFontSize="item.defFontSize"
									:activeFontBold="item.activeFontBold" :activeColor="item.activeColor"
									:defColor="item.defColor" :props="item.props" :type="item.type"
									:backgroundColor="item.backgroundColor" :mode="item.mode" :hasLine="item.hasLine"
									:lineType="item.lineType" :lineColor="item.lineColor" :theme="item.theme"
									:itemWidth="item.itemWidth" :itemMinWidth="item.itemMinWidth"
									:itemMaxWidth="item.itemMaxWidth" :itemFull="item.itemFull"
									:customData="item.customData" @click="$emit('tabsClick', $event)"></QS-Tabs>
							</block>
							<view class="dot" v-if="item.hasDot" :style="{ 
								backgroundColor: item.dotColor||'#FF6010' ,
								height: item.dotSize || '8px',
								width: item.dotSize || '8px',
								top: item.dotTop || '-3px',
								right: item.dotRight|| '-3px'
							}"></view>
							<QS-Badge v-if="item.hasBadge" :text="item.badgeText" position="absolute"
								:top="item.badgeTop || '-6px'" :right="item.badgeRight || '-6px'"
								:fontSize="item.badgeSize || '10px'" :fontWeight="item.fontWeight || 'bold'"></QS-Badge>
						</view>
					</block>
				</slot>
			</view>
		</view>
		<block v-if="getHasPlacherholder && getFixed">
			<view class="QS_Navbar-statusBar" :style="{ 'height': statusBarHeight }" v-if="getStatusBar&&getFixed">
			</view>
			<view class="QS_Navbar--fixed--placherholder" v-if="getFixed"></view>
		</block>
		<!-- <block v-if="hasPopTip">
			<popTip ref="popTip" dynamic maskBg="rgba(0,0,0,.6)" :popData="popData" @tapPopup="tapPopup" :x="popTipX" :y="popTipY" placement="top-end"></popTip>
		</block> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import nProps from './props.js';
	// import popTip from '@/components/chunLei-popups/chunLei-popups.vue'
	import props from '@/QS-UI-CONFIG/components/QS-Navbar/js/props.js';
	import QSIcons from '../QS-Icons/QS-Icons.vue';
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';

	import tabsProps from '@/uni_modules/QS-UI/components/QS-Tabs/props.js'

	const QSComponentMixinRes = QSComponentMixin({
		componentType: 'QS-Navbar'
	});
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	const animation = weex.requireModule('animation');
	// #endif
	var _menuButtonInfoLeft = 0;
	var _wW = 0;
	export default {
		// #ifndef MP-ALIPAY
		mixins: [QSComponentMixinRes.mixin],
		components: {
			QSIcons,
			// popTip
		},
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			...nProps,
			...props
		},
		computed: {
			tabbarConfig() {
				return uni?.$qs?.store?.getters?. ['tabbar/tabbar'];
			},
			isTabbarPage() {
				let path = `/${this.$parent.__route__}`;
				const data = this.$parent?._data?.initObj || {};
				path = uni.$qs.renderUrlData(path, data);
				const index = this.tabbarConfig?.items?.findIndex(i => i.path == path) ?? -1;
				return index >= 0;
			},
			hasPopTip() {
				const data = this.navbarItems;
				for (let i = 0; i < data.length; i++)
					if (data[i].doEvent === 'popTip') return true;
				return false;
			},
			getFixed() {
				return String(this.fixed) === 'true'
			},
			getStatusBar() {
				return String(this.statusBar) === 'true'
			},
			getHasPlacherholder() {
				return String(this.hasPlacherholder) === 'true';
			}
		},
		watch: {
			backgroundColor(n) {
				this.setBackgroundColor(n);
			},
			navbarItems(n) {
				this.setNavbarItems(n);
			},
			diffMenuButtonInfo() {
				this.checkDiffMenuButtonInfo();
			}
		},
		data() {
			return {
				statusBarHeight: statusBarHeight + 'px',
				menuButtonInfoLeft: 0,
				iconSize: '18px',
				wW: 7.2,
				navbarAnimation: {},
				navbarAni: null,
				popTipX: 0,
				popTipY: 0,
				popData: [],
				nNavbarItems: []
			};
		},
		created() {
			// #ifndef APP-NVUE
			this.navbarAni = uni.createAnimation({
				duration: 0
			});
			// #endif
			this.checkDiffMenuButtonInfo();
		},
		mounted() {
			this.setBackgroundColor();
			this.setNavbarItems(this.navbarItems);
		},
		methods: {
			checkDiffMenuButtonInfo() {
				// #ifdef MP
				console.log('checkDiffMenuButtonInfo')
				const {
					windowWidth,
					platform
				} = uni.getSystemInfoSync();
				if (String(this.diffMenuButtonInfo) === 'true') {
					if (platform != 'windows') {
						if (_menuButtonInfoLeft && _wW) {
							this.menuButtonInfoLeft = _menuButtonInfoLeft;
							this.wW = _wW;
							return;
						}
						const menuButtonInfoLeftDx = uni.getMenuButtonBoundingClientRect().left;
						const menuButtonInfoLeft = (windowWidth - menuButtonInfoLeftDx);
						this.menuButtonInfoLeft = menuButtonInfoLeft;
						this.wW = (((menuButtonInfoLeftDx - 12.5 * 2) / windowWidth)) * 750 / 100;
						_menuButtonInfoLeft = this.menuButtonInfoLeft;
						_wW = this.wW;
					} else {
						this.menuButtonInfoLeft = 0;
						this.wW = 750 / 100;
					}
				}
				// #endif
			},
			voidFn() {},
			setTabsProps(item) {
				const arr = [
					'space',
					'autoScrollType',
					'activeFontSize',
					'defFontSize',
					'activeFontBold',
					'activeColor',
					'defColor',
					'props',
					'type',
					'backgroundColor',
					'mode',
					'lineType',
					'lineColor',
					'theme',
					'itemWidth',
					'itemMinWidth',
					'itemFull',
					'customData',
					'itemMaxWidth',
					'itemMaxWidth',
				]

				arr.forEach(i => {
					if (!item[i]) item[i] = tabsProps[i].default;
				})
			},
			setNavbarItems(arr) {
				const newArr = JSON.parse(JSON.stringify(arr));
				newArr.forEach(i => {
					switch (i.type) {
						case 'tabs':
							this.setTabsProps(i);
							break;
					}
				})
				this.nNavbarItems = newArr;
			},
			tapPopup(e) {
				this.$refs.popTip.valueChange(false);
				this.$emit('tapPopTip', e);
			},
			setBackgroundColor(color) {
				const bgColor = color || this.backgroundColor;
				// #ifndef APP-NVUE
				this.navbarAni.backgroundColor(bgColor).step({ duration: 150 });
				this.navbarAnimation = this.navbarAni.export();
				// #endif
				// #ifdef APP-NVUE
				animation.transition(this.$refs.background, {
					styles: {
						backgroundColor: bgColor
					},
					duration: 150, //ms
					needLayout: false,
					delay: 0 //ms
				})
				// #endif
			},
			_click(e, type) {
				if (type) {
					switch (type) {
						case 'back':
							this.backFn();
							break;
						case 'home':
							this.relaunchFn();
							break;
					}
					return;
				}
				let index;
				// #ifdef APP-NVUE
				if (e.currentTarget.dataset) {
					index = e.currentTarget.dataset.index;
				} else {
					index = e.currentTarget.attr.dataIndex;
				}
				// #endif
				// #ifndef APP-NVUE
				index = e.currentTarget.dataset.index;
				// #endif
				if (index == undefined || index == null) {
					uni.showToast({
						icon: 'none',
						title: '找不到下标',
						position: 'center'
					})
					return;
				}
				const item = this.navbarItems[index];
				if (item.doEvent) {
					switch (item.doEvent) {
						case 'back':
							this.backFn();
							break;
						case 'navigateTo':
							if (typeof uni.$qs === 'object') {
								uni.$qs.navigateTo({
									url: item.targetPath
								})
							} else {
								uni.navigateTo({
									url: item.targetPath
								})
							}
							break;
						case 'relaunch':
							this.relaunchFn();
							break;
						case 'popTip':
							const target = e.target;
							this.popTipX = target.x;
							this.popTipY = target.y;
							if (Array.isArray(item.popDatas) && this.popData !== item.popDatas) this.popData = item
								.popDatas;
							this.$refs.popTip.valueChange(true);
							break;
						default:
							this.$emit('click', item, index);
							break;
					}
				} else {
					this.$emit('click', item, index);
				}
			},
			backFn() {
				if (typeof uni.$qs === 'object') {
					uni.$qs.navigateBack();
				} else {
					uni.navigateBack()
				}
			},
			relaunchFn() {
				let path;
				if (this.relaunchPath) path = this.relaunchPath;
				else if (typeof uni.$qs === 'object' && uni.$qs.launchPath) path = uni.$qs.launchPath;
				if (path) {
					uni.reLaunch({
						url: path
					})
				} else {
					console.log('路径不存在')
				}
			},
			getPromiseQuery(node) {
				return new Promise((rs, rj) => {
					this.getQuery(data => {
						rs(data);
					}, node)
				})
			},
			getQuery(cb, node = '.QS_Navbar') {
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs[node.replace('.', '').replace('#', '')], option => {
					// console.log('获取navbar布局信息成功: ' + JSON.stringify(option))
					if (cb && typeof cb === 'function') cb(option.size)
				})
				// #endif
				// #ifndef APP-NVUE
				let view;
				// #ifndef MP-BAIDU || MP-ALIPAY
				view = uni.createSelectorQuery().in(this);
				// #endif
				// #ifdef MP-BAIDU || MP-ALIPAY
				view = uni.createSelectorQuery();
				// #endif
				view.select(node).fields({
					size: true
				})
				view.exec(res => {
					// console.log('获取navbar布局信息成功: ' + JSON.stringify(res))
					if (res[0]) {
						if (cb && typeof cb === 'function') cb(res[0])
					} else {
						if (cb && typeof cb === 'function') cb({
							height: 77
						})
					}
				})
				// #endif
			}
		}
		// #endif
	}
</script>

<style lang="scss" scoped>
	// #ifndef MP-ALIPAY
	// @import "../../css/index.scss";
	// #ifndef APP-NVUE
	view,
	scroll-view,
	swiper,
	swiper-item,
	cover-view,
	cover-image,
	icon,
	text,
	rich-text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	camera,
	image,
	video,
	picker-view,
	picker-view-column {
		box-sizing: border-box;
	}

	// #endif

	.QS_Navbar {
		width: 750rpx;
		// #ifndef APP-NVUE
		box-sizing: border-box;
		// #endif
	}

	.QS_Navbar-statusBar {
		width: 750rpx;
		height: 20px;
		// #ifndef APP-NVUE
		box-sizing: border-box;
		// #endif
	}

	.QS_Navbar--fixed {
		position: fixed;
		// #ifndef APP-NVUE
		box-sizing: border-box;
		// #endif
	}

	.QS_Navbar-header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		width: 750rpx;
		height: 44px;
		padding: 5px 12.5px;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.QS_Navbar--fixed--placherholder {
		width: 750rpx;
		height: 44px;
	}

	.QS_Navbar-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		// overflow: hidden;
		position: relative;
	}

	.QS_Navbar-item--search {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 12px;
	}

	.QS_Navbar-text {
		font-size: 30rpx;
	}

	.text_overflow_ellipsis {
		/* #ifndef APP-NVUE */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* #endif */
		/* #ifdef APP-NVUE */
		lines: 1;
		/* #endif */
	}

	.colImageText {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.colImageText-image {
		height: 20px;
		width: 20px;
	}

	.colImageText-text {
		height: 14px;
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		font-size: 10px;
		margin-top: 1px;
		text-align: center;
	}

	// #endif

	.dot {
		position: absolute;
		border-radius: 50%;
	}
</style>
